<template>
  <div class="my-container">
    <el-row>
      <el-col :span="6">
          <project-card :features="featureData" class="user-card"></project-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-tabs v-model="activeName">
            <el-tab-pane label="功能" name="feature">
                <feature :features="featureData"></feature>
            </el-tab-pane>
            <el-tab-pane label="章节" name="chapter">
                <chapter></chapter>
            </el-tab-pane>
            <el-tab-pane label="作者" name="author">
                <author></author>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { features } from '../../api/user'
import Author from './components/author.vue';
import Chapter from './components/chapter.vue';
import feature from './components/feature.vue';
import ProjectCard from './components/ProjectCard.vue';
// import { watchSwitchLang } from '../../utils/i18n'
export default {
  components: { feature, Chapter, Author, ProjectCard },
  data() {
    return {
        activeName: 'feature',
        featureData: []
    };
  },
  mounted() {
    //   console.log(this.$store);
      this.getFeatureData();
      // watchSwitchLang(this.getFeatureData)
  },
  methods: {
      async getFeatureData() {
          this.featureData = await features();
          console.log(this.featureData);
      }
  },
};
</script>

<style scoped lang='scss'>
.my-container{
  margin-top: 40px;
    .user-card{
        margin-right: 20px;
    }
}
</style>
